import React, { useState, useEffect } from "react";
import { useSearchParams } from "react-router-dom";
import {
  RightOutline,
  LeftOutline,
  CheckCircleOutline,
} from "antd-mobile-icons";
import axios from "axios";
import { Sticky, Button } from "react-vant";
import "./Show.css";
import { Popup, Swiper, Stepper } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { addcart } from "../../store/cart";

export default function Show() {
  const [visible1, setVisible1] = useState(false);
  const [visible2, setVisible2] = useState(false);
  const navigate = useNavigate();
  const [params] = useSearchParams();
  const [list, setList] = useState([]);
  const [show, setShow] = useState(false);
  const id = params.get("id");
  const getData = async () => {
    let list = await axios.get(`/Lmy/show?id=${id}`);
    return setList({...list.data.data[0],num:1});
  };
  let dispatch = useDispatch();
  useEffect(() => {
    getData();
  }, []);

  const toggleVisibility = () => {
    setShow(!show);
  };

  return (
    <div
      style={{ width: "100%", background: "rgb(244,248,255)", height: "100vh" }}
    >
      <div className="showBox">
        <div>
          <div style={{ position: "relative" }}>
            <Swiper autoplay loop>
              {list.image ? (
                list.image.map((src) => (
                  <Swiper.Item key={src}>
                    <div>
                      <img
                        src={src}
                        alt=""
                        style={{ width: "100%", height: "300px" }}
                      />
                    </div>
                  </Swiper.Item>
                ))
              ) : (
                <Swiper.Item>
                  <div>{"暂无图片"}</div>
                </Swiper.Item>
              )}
            </Swiper>
          </div>
          <p
            style={{
              position: "absolute",
              fontSize: "1.5625rem",
              left: "0.625rem",
              top: "0.625rem",
            }}
          >
            <LeftOutline
              onClick={() => {
                navigate("/header");
              }}
            />
          </p>

          <div className="showBox-text">
            <p>
              <span
                style={{
                  color: "red",
                  fontSize: "0.9735rem",
                  paddingLeft: "1.25rem",
                }}
              >
                ￥
              </span>
              <span style={{ color: "red", fontSize: "1.5625rem" }}>
                {list.price}.00
              </span>
              <span
                style={{
                  fontSize: "18px",
                  paddingLeft: "10px",
                  color: "gray",
                }}
              >
                /1kg
              </span>
            </p>
            <p
              style={{
                fontSize: "0.9735rem",
                paddingRight: "1.25rem",
                color: "gray",
              }}
            >
              {list.sold}
            </p>
          </div>
          <p style={{ marginTop: "0.75rem" }}>
            <span
              style={{
                fontSize: "1.25rem",
                paddingLeft: "1.25rem",
              }}
            >
              {list.name}
            </span>
            <span style={{ float: "right", paddingRight: "2.5rem" }}>
              <img
                src={show ? "./public/爱心.png" : "./public/爱心1.png"}
                alt=""
                style={{ width: "1.25rem", height: "1.25rem" }}
                onClick={toggleVisibility}
              />
            </span>
          </p>
        </div>
      </div>
      <div className="connent">
        <div className="connent-one">
          <ul style={{ borderBottom: "1px solid rgb(241,241,241)" }}>
            <li>
              <span className="aa">配送</span>
              <span className="bb">发货至 河北省-石家庄市</span>
            </li>
            <li>
              <span className="aa">运费</span>
              <span className="bb">顺丰快递10元起</span>
            </li>
          </ul>
        </div>
        <div className="connent-two">
          <ul>
            <li>
              <CheckCircleOutline />
              品质保障
            </li>
            <li>
              <CheckCircleOutline />
              放心购买
            </li>
            <li>
              <CheckCircleOutline />
              交易安全
            </li>
            <li>
              <CheckCircleOutline />
              平台担保
            </li>
          </ul>
        </div>
        <div className="connent-three">
          <div className="connent-text">
            <p style={{ fontSize: "1.125rem" }}>用户评价（600）</p>
            <p>
              <RightOutline />
            </p>
          </div>
          <div
            style={{
              border: "1px solid rgb(241,241,241)",
              borderRadius: "20px",
              marginTop: "0.625rem",
              display: "flex",
            }}
          >
            <img
              src="https://bpic.588ku.com/back_origin_min_pic/19/10/22/633d824db9f635269ef1f23f2a74047a.jpg"
              alt=""
              style={{ width: "5rem", height: "5rem" }}
            />
            <div style={{ height: "5rem" }}>
              <p
                style={{
                  marginLeft: "0.625rem",
                  marginTop: "0.625rem",
                  color: "gray",
                }}
              >
                水果确实很新鲜，验证了，确实是有机的，快递速度也非常快，非常快，非常快的…
              </p>
              <div style={{ width: "50%" }}>
                <p
                  style={{
                    width: "50%",
                    display: "flex",
                    justifyContent: "space-around",
                  }}
                >
                  <img
                    src="https://tse3-mm.cn.bing.net/th/id/OIP-C.8_tCUnUXLMr4aMlurgfCuAHaHa?rs=1&pid=ImgDetMain"
                    alt=""
                    style={{
                      width: "1.875rem",
                      height: "1.875rem",
                      marginTop: "0.3125rem",
                      borderRadius: "50%",
                    }}
                  />
                  <span style={{ marginTop: "0.9375rem" }}>Zero</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div className="connent-four">
          <p style={{ padding: "0.625rem", fontSize: "1.375rem" }}>商品详情</p>
          <p style={{ fontSize: "1.0625rem", padding: "0.625rem" }}>
            清爽的桃子，爽口，咬下去好像带着一点点刺一样，麻麻的，带着稍微刺激的酸酸的味道就好象我们无知的单纯的意识，活力而自信。成熟的桃子看起来圆润饱满，你轻轻咬开它，新鲜、香甜的滋味就会让蔓延开来，你的嘴唇上、舌头上同时染满了汁水。桃子的果肉就是个白胖胖的小孩，没有熟透的桃子颜色是青色的，咬在嘴里酸酸的还有点涩味。
          </p>
          <img
            src="https://pic.616pic.com/ys_bnew_img/00/45/44/xYYmoDaC2h.jpg"
            alt=""
            style={{ width: "100%", height: "18.75rem", padding: "0.625rem" }}
          />
          <p style={{ fontSize: "1.0625rem", padding: "0.625rem" }}>
            清爽的桃子，爽口，咬下去好像带着一点点刺一样，麻麻的，带着稍微刺激的酸酸的味道就好象我们无知的单纯的意识，活力而自信。成熟的桃子看起来圆润饱满，你轻轻咬开它，新鲜、香甜的滋味就会让蔓延开来，你的嘴唇上、舌头上同时染满了汁水。桃子的果肉就是个白胖胖的小孩，没有熟透的桃子颜色是青色的，咬在嘴里酸酸的还有点涩味。
          </p>
          <img
            src="https://pic.616pic.com/ys_bnew_img/00/08/87/qekfuFzU6E.jpg"
            alt=""
            style={{ width: "100%", height: "18.75rem", padding: "0.625rem" }}
          />
        </div>
        <div>
          <Sticky position="bottom">
            <div className="search-foot">
              <div
                onClick={() => {
                  navigate("/customer");
                }}
              >
                <img
                  src="./public/客服.png"
                  alt=""
                  style={{ width: "40px", height: "40px" }}
                />
                <p>联系客服</p>
              </div>
              <div
                onClick={() => {
                  navigate("/index/cart");
                }}
              >
                <img
                  src="./public/购物车.png"
                  alt=""
                  style={{ width: "35px", height: "35px" }}
                />
                <p>购物车</p>
              </div>
              <div className="search-foot-bottom">
                <button
                  style={{ background: "rgb(255,153,0)" }}
                  onClick={() => {
                    setVisible1(true), setVisible2(false);
                  }}
                >
                  加入购物车
                </button>

                <button
                  style={{ background: "rgb(153,204,51)" }}
                  onClick={() => {
                    setVisible1(true), setVisible2(true);
                  }}
                >
                  立即购买
                </button>
              </div>
            </div>
          </Sticky>
          <Popup
            visible={visible1}
            showCloseButton
            onClose={() => {
              setVisible1(false);
            }}
            onMaskClick={() => {
              setVisible1(false);
            }}
            bodyStyle={{ height: "30vh" }}
          >
            <div
              style={{
                width: "100%",
                height: "160px",
                display: "flex",
                padding: "20px",
              }}
            >
              <div>
                <img
                  src={list.image}
                  alt=""
                  style={{
                    width: "100px",
                    height: "100px",
                    borderRadius: "10px",
                  }}
                />
              </div>
              <div
                style={{
                  marginLeft: "20px",
                  height: "35px",
                  lineHeight: "35px",
                }}
              >
                <p style={{ color: "red" }}>
                  <span>￥</span>
                  <span style={{ fontSize: "20px" }}>{list.price}.00</span>
                </p>
                <p>
                  <span>请选择数量（单位：kg）</span>
                  <span>
                    <Stepper
                      defaultValue={1}
                      onChange={(value) => {
                        setList({ ...list, num: value });
                      }}
                    />
                  </span>
                </p>
              </div>
            </div>
            {visible2 ? (
              <Button
                onClick={() => {
                  setVisible1(false);
                  dispatch(addcart(list));
                }}
                style={{
                  width: "90%",
                  height: "45px",
                  background: "rgb(153,204,51)",
                  color: "white",
                  margin: "20px",
                  borderRadius: "10px",
                  fontSize: "18px",
                }}
              >
                立即购买
              </Button>
            ) : (
              <Button
                onClick={() => {
                  setVisible1(false);
                  dispatch(addcart(list));
                }}
                style={{
                  width: "90%",
                  height: "45px",
                  background: "rgb(153,204,51)",
                  color: "white",
                  margin: "20px",
                  borderRadius: "10px",
                  fontSize: "18px",
                }}
              >
                确认
              </Button>
            )}
          </Popup>
        </div>
      </div>
    </div>
  );
}
